<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>bootstrap</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<style type="text/css">
			div{
				border: 1px solid red;
			}
			h1{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-12">
					<h1>bootstrap作业</h1>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-6 col-md-8 col-xs-12">
					<h1>123</h1>
					<img src="1.png" class="img-circle" alt="image">
				</div>
				<div class="col-lg-6 col-md-4 col-xs-12">
					<img src="1.png" class="center-block" alt="image">
				</div>
			</div>
			<div class="row">
				<div class="col-lg-6 col-md-8 col-xs-12">
					<p class="bg-info">
						Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
					</p>
				</div>
				<div class="clearfix visible-xs-block"></div>
				<div class="col-lg-6 col-md-4 col-xs-12">
					<button class="btn btn-primary btn-lg" type="submit">But2222222222222ton</button>
				</div>
			</div>
			
			<div class="cta">
                <p>
                    <a class="btn btn-lg btn-primary outbound-link" href="https://auth.timepot.io/timepot/#/signup;ref=landing" target="_blank">Create your Timepot</a>
                </p>
            </div>
			
		</div>
	</body>
</html>
